<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     <h1>The Ajax 01  page</h1>
     <button onclick="doAjaxStart()">Ajax Get Request</button>
     <span  id="result">Data is Loading ...</span>
 </div>
<script>
     function doAjaxStart(){
         //初始化span标记内部内容
        var span= document.getElementById("result");
        span.innerHTML="Data is Loading....";
        //创建xhr对象
         var xhr= new XMLHttpRequest();
         //设置状态监听
         xhr.onreadystatechange=function(){
             //readyState==4表示服务器响应到客户端的数据已经接收完成
             //status==200 表示服务器端处理过程是ok的，500表示异常
             if(xhr.readyState==4&&xhr.status==200){
                 span.innerHTML=xhr.responseText;
             }
         }
         //建立连接
         xhr.open("GET","http://localhost/doAjaxStart",true);//true表示异步
         //发送请求
         xhr.send(null);
         console.log("hello");
     }
</script>
</body>
</html>